<template>
  <div class="wrap">
    <ul class="list">
      <li class="item">
        <div class="label">
          <span class="marker-icon">*</span>技能名/奖章名
        </div>
        <div class="value">
          <input type="text" v-model="skillName" class="input right-text" placeholder="请填写，如PS、英语六级" />
        </div>
      </li>
      <li>
        <div class="textarea-wrap">
          <div class="title">
            <span class="marker-icon">*</span>在校经历
          </div>
          <textarea class="textarea" v-model="skillDesc" placeholder="请输入自己的工作经验或实习经验~"></textarea>
        </div>
      </li>
    </ul>
    <div class="upload-wrap">
      <div class="upload-tips">证书/奖章照片上传（可传jpg、png,小于5M,非必填）</div>
      <img :src="skillImgUrl" class="upload-btn" @click="preImg(skillImgUrl)" v-if="skillImgUrl">
      <div class="upload-btn" @click="mainImgUp">
        <van-icon name="photo-o" class="upload-icon" />
        <div>{{skillImgUrl ? '重新上传' : '上传图片'}}</div>
      </div>
    </div>
    <div class="theme-btn btn" @click="saveEditSkill">保存</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: null,
      id: "",
      skillName:'',
      skillDesc:'',
      skillImgUrl:'',
    };
  },
  onLoad(e) {
    if (e.item) {
      let item = JSON.parse(e.item);
      this.skillName = item.skillName;
      this.skillDesc = item.skillDesc;
      this.skillImgUrl = item.skillImgUrl;
      this.id = item.id;
    } else {
        Object.assign(this.$data, this.$options.data());
    }
  },
  methods: {
    preImg(url){
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls:this.skillImgUrl.split() // 需要预览的图片http链接列表
      })
    },
    mainImgUp() {
      var _this = this;
      wx.showLoading({
          title: '加载中',
      });
      wx.chooseImage({
        count: 1,
        success(res) {
          let path = res.tempFilePaths[0];
          let FSM = wx.getFileSystemManager();
          let base64Str = FSM.readFileSync(path, "base64");
          let imgType = res.tempFilePaths[0].substring(
            res.tempFilePaths[0].lastIndexOf(".")
          );
          _this.uploadImg(base64Str, imgType).then(res => {
            _this.skillImgUrl = res.data.imgUrl;
          });
        },
        complete() {
            wx.hideLoading();
        }
      });
    },
    //图片上传公共接口
    uploadImg(base64Str, imgType) {
      return new Promise((resolve, reject) => {
        this.$api.uploadImg({ base64Str, imgType }).then(res => {
          resolve(res);
        });
      });
    },
    saveEditSkill() {
      let params = {
        skillName: this.skillName,
        skillDesc: this.skillDesc,
        skillImgUrl: this.skillImgUrl,
        id: this.id
      };
      this.$api.saveEditSkill(params).then(res => {
        if (res.code == 0) {
          wx.navigateBack({
            delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  height: 100%;
}
.list {
  border-bottom: 10px solid $grey-bg;
}
.item {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  box-sizing: border-box;
  font-size: 12px;
  border-bottom: 1px solid $grey-border-color;
}
.label {
  color: #40444c;
}
.marker-icon {
  color: $theme-color;
  margin-right: 5px;
}
.select-default {
  color: #c1c4c9;
}
.value {
  color: $color-text;
}
.right-text {
  text-align: right;
}
.select-value {
  span {
    padding-right: 20px;
  }
}
.textarea-wrap {
  padding: 15px;
}
.title {
  line-height: 24px;
  font-size: 13px;
  color: #40444c;
}
.textarea {
  width: 100%;
  height: 167px;
  border-radius: 4px;
  border: 1px solid $grey-border-color;
  padding: 10px 15px;
  box-sizing: border-box;
}
.upload-wrap {
  padding: 10px 15px;
}
.upload-tips {
  color: #c1c4c9;
  font-size: 12px;
  margin-bottom: 10px;
}
.upload-btn {
  width: 62px;
  height: 62px;
  text-align: center;
  color: #c1c4c9;
  border: 1px solid #c1c4c9;
  border-radius: 1px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.upload-icon {
  font-size: 40px;
  display: block;
  /deep/.van-icon,
  .van-icon:before {
    display: block;
  }
}
.btn {
  position: absolute;
  bottom: 36px;
  left: 15px;
  right: 15px;
}
</style>